<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <script src="/public/admin/js/jquery.min.js?v=2.1.4"></script>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        height: 450px;
    }
    #myDiv{
        margin-top: 20px;
    }
    #myDiv img{
        height: 350px;
        width: 100%;
    }
</style>
<body onmousemove="showScreen(event)">
<div id="line" style="height:450px;width: 1px;background: #f04d22; position: absolute;top:-20px;left: 0;z-index: 100;"></div>
<div id="myDiv">
    <img src="/public/speed/pin.png?t=0">
    <style>
        .timeline-dots-wrap {
            position: absolute;
            width: 100%;
            height: 30px;
            overflow: hidden;
        }
        .timeline-dots {
            margin: 0;
            padding: 0;
            position: relative;
            width: 100%;
            height: 100%;
            background: url("/public/speed/icon/timeline-bg.png") bottom repeat-x;
            transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }
        .timeline-dots li {
            float: left;
            width: 100px;
            transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
            list-style: none;
            text-align: center;
            overflow: hidden;
        }
        .timeline-dots li.slide-active button {
            color: #2972ca;
            font-size: 10px;
        }
        .timeline-dots button {
            cursor: pointer;
            border: none;
            outline: none;
            color: #ffffff;
            font-size: 10px;
            padding-bottom: 15px;
            background: url("/public/speed/icon/date-icon.png") bottom no-repeat;
            transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        }
    </style>
    <div class="timeline-dots-wrap bottom">
        <ul class="timeline-dots" id="kedu" >
        </ul>
    </div>
</div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
    });
    var arr = JSON.parse(atob('{:base64_encode(json_encode($arr))}'));//时间戳数组
    var leng = arr.length;
    console.log(arr[leng -1 ]);

    $('#myDiv').css('width',leng+'px');
    kedu(arr);
    $('.timeline-dots-wrap').css('width',leng+'px');
    var time = 0;
    var interval = setInterval(function () {
        if (time > 20){
            clearInterval(interval );
        }
        getImg();
        time++;
    },1000);
    function getImg(){
        $.ajax({
            type : "get",
            url : './getImg',
            dataType : "JSON",
            async: true,
            success : function(data){
                console.log(data);
                arr = data.arr;
                var leng = arr.length;
                var img = `<img src="/public/speed/pin.png?t=${data.t}">`;
                $('#myDiv').html(img);
                $('#myDiv').css('width',leng+'px');
                kedu(arr);
                $('.timeline-dots-wrap').css('width',leng+'px');

            },

        });
    }
    function kedu(arr){
        var len = arr.length;
        var result = '';
        for(var i=50;i<len;i+=100) {
            var t = time2sec(arr[i]);
            result+=`<li class="">
                        <button type="button" role="button">${t}</button>
                    </li>`;
        }
        $('#kedu').html(result);
    }
    var iframe_time = 0;
    function showScreen(event) {
        var left = event.clientX+document.documentElement.scrollLeft;
        $('#line').css('left',left);
        // $('#line').attr("title",left);
        $('#line').css('display','block');
        iframe_time = arr[left];
    }
    //赛道成绩分配
    $(document).keydown(function(event){
        var code = event.keyCode;
        if (code>48&&code<58){
            var p = code -48;
            var ret = {
                'time':iframe_time,
                'code':p
            };
            window.parent.postMessage(ret,'*')
        }
    });
    function time2sec(str){
        var n = parseInt(str);
        var D = new Date(n);
        var seconds = D.getSeconds();//秒(0-59)
        seconds = seconds<10?('0'+seconds):seconds;
        var ms = D.getMilliseconds();//毫秒(0-999)
        ms = ms<100?('0'+ms):ms;
        return seconds+'.'+ms;
    }

</script>
</html>
